/* eslint-disable semi */
/* eslint-disable semi */
/* eslint-disable quotes */
<template>
    <van-pull-refresh v-model="isLoading"
                      @refresh="onRefresh">

        <div class="TopList">

            <router-link to="/Homepage">
                <van-icon class="Backlink"
                          name="arrow-left" />
            </router-link>

            <span> 火腿师列表 </span>

        </div>

        <div class="banner"
             ref="scroll">
            <!-- 轮播图 -->
            <div id="topBanner"
                 class="hello-1">
                <van-swipe :autoplay="3000"
                           @change="onChange">
                    <van-swipe-item v-for="(item, index) in bannerimages"
                                    :key="index">
                        <img :src="item.imgSrc" />
                    </van-swipe-item>
                </van-swipe>
            </div>

            <!-- 中间秒杀图片 -->
            <div class="hello-3"
                 v-for="(item, index) in middleimages"
                 :key="index">
                <van-image width="3.2rem"
                           height="1.893rem"
                           :src="item.imgSrc" />
                <p>很抱歉！暂无数据</p>
            </div>

            <router-link to="/Authentication">
                <div class="lastadd"> 我也要成为火腿师</div>
            </router-link>

        </div>
    </van-pull-refresh>
</template>

<script>
import TabBar from "./TabBar.vue";
export default {
    components: { TabBar },
    // eslint-disable-next-line space-before-function-paren
    data() {
        return {
            count: 0,
            isLoading: false,
            index: 0,
            bannerimages: [
                { id: 0, imgSrc: require("../assets/images/a16.jpg") }
                // { id: 1, imgSrc: require("../assets/images/a18.jpg") }
            ],

            middleimages: [{ id: 0, imgSrc: require("../assets/images/none.png") }],

            loading: false,
            finished: false,
            num: 0,
            Orangetrees: []
        };
    },

    // eslint-disable-next-line space-before-function-paren
    // created:vue生命周期中的钩子函数，在这个时间点，data中的数据已经注入到响应式系统中
    created() {
        //轮播图

        //banner图******
        let Urlimg = "http://yyl.kmmyxb.cn/pic/";
        this.RequestApi("api/bblist", "", this.bannerimages, Urlimg);
        // 商城list******
        let params = {
            product_one_cate: "13493121"
        };
        this.RequestApi("api/getproductcate", params, this.Orangetrees, Urlimg);
        //购买list
        let params2 = {
            limit: "10",
            page: "1",
            cate_code: "13761837",
            title: ""
        };
        this.RequestApi("api/getproductlist", params2, this.Piglist, Urlimg);
    },

    mounted: function () {
        // 上拉加载
        window.addEventListener("scroll", this.onScroll);
        //初始化页面自执行轻提示框
        this.addtoast();
    },
    methods: {
        addtoast() {
            const toast = this.$toast.loading({
                duration: 0, // 持续展示 toast
                forbidClick: true,
                message: "加载中..."
            });

            let second = 1;
            const timer = setInterval(() => {
                second--;
                if (second) {
                    toast.message = "加载中...";
                } else {
                    clearInterval(timer);
                    // 手动清除 Toast
                    toast.clear();
                }
            }, 1000);
        },
        //vant 的轮播图 间隔时间和图片id
        play() {
            // eslint-disable-next-line semi
            setInterval(this.autoPlay, 2500);
        },
        onChange(index) {
            this.current = index;
        },

        //上拉加载
        onRefresh() {
            // this.$toast.loading({
            //   message: "加载中...",
            //   duration: 30000
            // });
            setTimeout(() => {
                // this.$toast("刷新成功");
                this.isLoading = false;
                this.count++;
                this.goods();
            }, 500);
        },

        //vant 加载列表方法
        onLoad() {
            // 异步更新数据
            setTimeout(() => {
                for (let i = 0; i < 1; i++) {
                    // this.Piglist.push(this.Piglist.length + 1);
                }
                // 加载状态结束
                this.loading = false;

                // 数据全部加载完成
                if (this.Piglist.length > 0) {
                    this.finished = true;
                }
            }, 500);
        },
        //判定上滑刷新方法
        onScroll() {
            //可滚动容器的高度
            this.LastTime();
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* //自定义.css的样式路径 */
/* @import "../css/HomePage.css"; */

* {
    padding: 0;
    margin: 0;
}
body {
    background-color: #f6f6f6;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
    display: block;
}
div {
    display: block;
    box-sizing: border-box;
}

.TopList {
    width: 100%;
    height: 30px;
    font-size: 18px;
    text-align: left;
}
.Backlink {
    line-height: 30px;
    margin-left: 10px;
}
.TopList span {
    line-height: 25px;
    margin-left: 110px;
    width: 60%;
}

.banner {
    width: 100%;
    height: 100%;
}
.hello-1 {
    width: 100%;
    height: 150px;
    padding: 0 2.6%;
    background-color: #ffffff;
}
.hello-1 img {
    width: 99%;
    height: 150px;
    border-radius: 10px;
    pointer-events: none;
}
.van-swipe {
    width: 100%;
    height: 100%;
}

.hello-3 {
    width: 100%;
    height: 200.34px;
    padding: 0 3%;
    padding-top: 10%;
    padding-left: 35%;
    background: #ffffff;
    text-align: left;
}

.hello-3 p {
    margin-top: 10px;
    margin-left: -10px;
    font-size: 16px;
    color: #bbb;
}
.recive {
    width: 30px;
    height: 20px;
    text-align: center;
    padding-left: 5px;
    margin-right: 10px;
    color: rgb(233, 92, 111);
    background-color: #fff;
}
h4 {
    color: #e95c6f;
    font-size: 18px;
}

h4 {
    color: #e95c6f;
    font-size: 16px;
    margin-bottom: 5px;
    clear: both;
    width: 100%;
    display: block;
    font-weight: bold;
}

.lastadd {
    position: fixed;
    bottom: 0px;
    background: #37cd87;
    width: 100%;
    height: 50px;
    color: #fff;
    line-height: 50px;
    font-size: 18px;
}

.gray {
    color: gray;
    opacity: 0.5;
}
.onlygray {
    color: gray;
}
.close {
    display: none;
}

li {
    position: absolute;
}

.active {
    background: #bfd6b6 !important;
}
</style>
